<template>
  <div class="area">
    <button @click="show = true">popup</button>
    <popup v-model="show" :visible="show">
      <div class="area-container">
        <div class="area-toolbar">
          <div @click.prevent.stop="show = false">取消</div>
          <div>确定</div>
        </div>
        <div class="area-content">
          <picker
            :children="province"
            @onScrollComplete="provinceComplete"
          ></picker>
          <picker :children="city" @onScrollComplete="cityComplete"></picker>
          <picker :children="area" @onScrollComplete="areaComplete"></picker>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import Picker from "./picker.vue";
import Popup from "./popup.vue";
import AreaData from "../assets/area.json";
export default {
  components: {
    Popup,
    Picker,
  },
  data() {
    return {
      show: false,
      selected: [], //選中的值
      province: [],
      city: [],
      area: [],
    };
  },
  created() {
    const { area } = AreaData;
    this.province = area.map((e) => {
      return {
        code: e.provinceCode,
        name: e.provinceName,
      };
    });
    this.provinceComplete(this.province[0]);
  },
  methods: {
    provinceComplete(val) {
      this.selected[0] = val;
      const { area } = AreaData;
      const { mallCityList } = area.find((e) => {
        return e.provinceCode == val.code;
      });
      this.city = mallCityList.map((e) => {
        return {
          code: e.cityCode,
          name: e.cityName,
        };
      });
      if (this.city.length > 0) {
        this.cityComplete(this.city[0]);
      }
    },
    cityComplete(val) {
      this.selected[1] = val;
      const { area } = AreaData;
      const { mallAreaList } = area
        .find((e) => {
          return e.provinceCode == this.selected[0].code;
        })
        .mallCityList.find((e2) => {
          return e2.cityCode == val.code;
        });
      this.area = mallAreaList.map((e) => {
        return {
          code: e.areaCode,
          name: e.areaName,
        };
      });
      if (this.area.length > 0) {
        this.areaComplete(this.area[0]);
      }
    },
    //最高の話
    areaComplete(val) {
      this.selected[2] = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.area-container {
  width: 100%;
  height: auto;
  .area-toolbar {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #f5f5f5;
    div {
      color: #108ee9;
      font-size: 17px;
      padding: 9px 15px;
      height: 42px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      transition: all 0.2s ease;
      user-select: none;
      &:active
      {
        background: #ddd;
      }
    }
  }
  .area-content {
    display: flex;
  }
}
</style>